<template>
    <div class="container">
      <div class="search">
        <input type="text" placeholder="搜索附近商家商品">
      </div>
      <div class="menu">
        <span class="menu-item" v-for="(item, key) in menu" :key="key">
          <div class="icon" :style="item.style">
            <a><i @click="is" class="iconfont icon-base" :class="item.className"></i></a>
          </div>
          <span class="menu-item__title">{{item.name}}</span>
        </span>
      </div>
      <i-button type="info" @click="at">信息按钮</i-button>
      <Switch :size="18" @on-change="change"></Switch>
      <h1>122221</h1>
    </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        menu: [{
          name: '超市便利',
          className: 'icon-gouwulan',
          style: 'background:linear-gradient(169deg,rgba(119,216,255,1) 0%,rgba(45,168,255,1) 100%)'
        },{
          name: '新鲜蔬果',
          className: 'icon-pingguoshuiguo',
          style: 'background:linear-gradient(171deg,rgba(144,231,39,1) 0%,rgba(69,192,21,1) 100%)'
        },{
          name: '烘焙蛋糕',
          className: 'icon-icon-test',
          style: 'background:linear-gradient(169deg,rgba(255,207,76,1) 0%,rgba(255,127,23,1) 100%)'
        },{
          name: '鲜花绿植',
          className: 'icon-icon-test1',
          style: 'background:linear-gradient(169deg,rgba(254,132,193,1) 0%,rgba(248,77,127,1) 100%)'
        },{
          name: '医疗健康',
          className: 'icon-jiaonang',
          style: 'background:linear-gradient(169deg,rgba(134,223,255,1) 0%,rgba(51,191,248,1) 100%)'
        }]
      }
    },
    methods: {
      change(staus){
        this.$Message.info('开关:' + staus);
      },
      del(index) {
        console.log(1);
        this.arr.splice(index, 1);
      },
      fn() {
        return 4;
      },
      is(){

      }
    },
  };
</script>

<style scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background: blanchedalmond;
  }
  .search{
    width: 750rpx;
    height: 100rpx;
    background: #46B24F;
    color: #fff;
  }
  .search>input{
    width:698rpx;
    height:68rpx;
    background:rgba(255,255,255,1);
    border-radius:35rpx;
    margin: auto;
    color: #999999;
    font-size: 28rpx;
    text-align: center;
  }
  .menu{
    width: 100vw;
    background: #fff;
    padding: 20rpx 0;
  }
  .menu-item{
    display: inline-block;
    width: 20vw;
    text-align: center;
  }
  .icon{
    margin: auto;
    border-radius: 50%;
    width:80rpx;
    height:80rpx;
  }
  .menu-item__title{
    font-size:24rpx;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:32rpx;

  }
  .icon-base{
    font-size: 50rpx;
    line-height: 80rpx;
    color: #fff;
  }
</style>
